<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			/*background: red;*/
			position: absolute;
		}
	</style>
	<script type="text/javascript">
		window.onload=function () {
			var left;
			var oDiv = document.getElementById("box");
			var oDog = document.getElementById("dog");
			num=0;
			function move() {
				var left = window.getComputedStyle ? window.getComputedStyle(oDiv,null).left : oDiv.currentStyle.left;
			// alert(left);
				
				if(parseInt(left)>=400){
					num=1;
					
				}else if(parseInt(left)<=0){
					num=0;
				}
				if (num==0) {
					owidth = parseInt(left)+5+"px";
					oDog.src="13.gif";
				}else{
					owidth = parseInt(left)-5+"px";
					oDog.src="14.gif";
				}
				oDiv.style.left=owidth;
				// alert(parseInt(left));
			}
			
			timer = setInterval(move, 100);
			// 
			
		}
	</script>
</head>
<body>
	<div id="box">
		<img src="13.gif" alt="" id="dog">
	</div>
</body>
</html>